<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hoppinzq</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
	<link rel="stylesheet" href="static/css/style.css">
	<style>
		.preloader {
			background: #fff;
			position: fixed;
			left: 0px;
			top: 0px;
			/*padding-left: 0%;*/
			/*padding-top: 25%;*/
			width: 100%;
			height: 100%;
			z-index: 999999;
			display: block;
			/*transform: translateX(-50%) translateY(-50%);*/
		}
		.preloader_image{
			background-position: center center;
			background-repeat: no-repeat;
			/*background-image: url(http://hoppinzq.com/zui/static/svg/preloader.svg);*/
		}
		.wiper{
			display: none;
		}
		/*.loader {*/
		/*	position: fixed;*/
		/*	top: 50%;*/
		/*	left: 50%;*/
		/*	transform: translateeX(-50%) translateY(-50%);*/
		/*}*/
		.preloader span{
			margin-top: 25%;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 24px;
			color: rgb(255, 255, 255,.1);
			display: inline-block;
			transition: all .5s;
			animation: animate 2s infinite;
		}
		.preloader span:nth-child(1){
			animation-delay: .1s;
		}
		.preloader span:nth-child(2){
			animation-delay: .2s;
		}
		.preloader span:nth-child(3){
			animation-delay: .3s;
		}
		.preloader span:nth-child(4){
			animation-delay: .4s;
		}
		.preloader span:nth-child(5){
			animation-delay: .5s;
		}
		.preloader span:nth-child(6){
			animation-delay: .6s;
		}
		.preloader span:nth-child(7){
			animation-delay: .7s;
		}
		.preloader span:nth-child(8){
			animation-delay: .8s;
		}
		@keyframes animate{

			0% {
				color: rgb(255, 255, 255,.1);
				transform: translateY(0);
				margin-left: 0;
			}
			25%{
				color: #4fab45;
				transform: translateY(-15px);
				margin-left: 10px;
				text-shadow: 0 15px 5px rgb(0,0,0,1);
			}
			100%{
				color: rgb(255, 255, 255,.1);
				transform: translateY(0);
			}
		}
	</style>
</head>
<body>
<div class="preloader preloader_image">
	<span>H</span>
	<span>O</span>
	<span>P</span>
	<span>P</span>
	<span>I</span>
	<span>N</span>
	<span>Z</span>
	<span>Q</span>
</div>

<script src="static/js/jquery.min.js"></script>
<script>
	let hoppinzq = ["H", "O", "P", "P", "I", "N", "Z", "Q", ":)"];
	let hoppinzqColor = ["#eb4747", "#ebc247", "#99eb47", "#47eb70", "#47ebeb", "#4770eb", "#9947eb", "#eb47c2", "#eb4747"];

	$(function () {
		$(".preloader").delay(3200).fadeOut(0,function () {
			let $preloader = $(this);
			$(this).html("")
			setTimeout(function (){
				$preloader.remove();
				$(".wiper").show(1000)
			},3200+3600);
			// setTimeout(function (){
			// 	$(".loader").remove();
			// },1200+9800);
			$preloader.removeClass("preloader_image");

			$(this).show();
			let $criterion = $("<div class='criterion'></div>");
			setTimeout(function (){
				$criterion.addClass("loader");
			},3200+5000);
			for (let i = 0; i < 9; i++) {
				$preloader.append($("<div class='background'></div>").css({
					"left": i  * 12.5 + "%",
					"height": "100vh",
					"background-color": hoppinzqColor[i]
				}));
				$criterion.append($("<div class='text'>" + hoppinzq[i] + "</div>").addClass("text" + i).delay(7500)
						.fadeIn(0,function () {
							if(i<8){
								$(this).after($("<span class='text'>"+hoppinzq[i]+"</span>").addClass("text" + i));
							}
						}));
				$criterion.append($("<div class='frame'></div>").addClass("frame" + i));
				for (let j = 0; j < 12; j++) {
					$criterion.append($("<div class='particle'></div>").addClass("particle" + String(i) + String(j)));
				}
			}
			$preloader.append($criterion);
		});
	})
</script>
</body>
</html>
